<template>
    <div>
      <div id="title">
          <div class="left" @click="$router.back()">
              <van-icon id="iconcccon" color="#fff" size="16" name="arrow-left" />
          </div>
          <div class="box1">地图找房</div>
          <div class="box2"></div>
      </div>
        <baidu-map @ready="initFn" class="bm-view" :center="center" :zoom="zoom">
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
             <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
             <bm-overlay
                pane="labelPane"
                class="sample"
                @draw="draw"
                @mouseover.native="active = true"
                @mouseleave.native="active = false"
            >
                <div>余杭</div>
            </bm-overlay>

        </baidu-map>
    </div>
</template>

<script>
export default {
    props: {

    },
    data() {
        return {
            zoom:11,
            center:"杭州",
            active: false,
            longitude:"",
            latitude:"",
        };
    },
    components: {
    },
    methods: {
        draw ({el, BMap, map}) {
            const pixel = map.pointToOverlayPixel(new BMap.Point(120 ,31))
            el.style.left = pixel.x - 60 + 'px'
            el.style.top = pixel.y - 20 + 'px'
        },
        initFn({BMap, map}) {
             const myGeo = new BMap.Geocoder()
            myGeo.getPoint('上海', function (point) {
                if (point) {
                console.log(point)
                // map.centerAndZoom(point, 11)
                }
            }, '上海')
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
};
</script>

<style scoped>
.sample {
  width: 56px;
  height: 56px;
  line-height: 56px;
  border-radius: 50%;
  background: rgba(88, 209, 72, 0.5);
  overflow: hidden;
  box-shadow: 0 0 5px #000;
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
}
/* 百度地图 */
.bm-view {
  position: absolute;
  /* left: 0; */
  width: 375px;
  height: 620px;
  /* z-index: 1; */
  margin-top: 45px; ;
}
#title {
    width: 100%;
    height: 45px;
    background-color: #21b97a;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* z-index: 99999999; */
}
#title .left {
    flex: 1;
    line-height: 45px;
}
#title #iconcccon {
    margin-left: 16px;
}
#title .box1 {
    text-align: center;
    color: #fff;
    line-height: 45px;
    flex: 1;
}
#title .box2 {
    flex: 1;
    height: 400px;
    width: 100%;
}
</style>
